<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue学习</title>
	<script src="js/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

  <style type="text/css">
    #app{margin:50px auto;width:400px;height: auto;}
    fieldset{ border:1px solid orange; }
    fieldset input{width: 200px height30px; margin: 10px 0;}
    table{ margin:50px auto;width:400px;height: auto;}
    table thead{ background: orange; }
  </style>

</head>
<body>
<div id="app" >
 <!--  第一部分 -->
  <fieldset>
      <legend>拇指哥学生录入系统</legend>
      <div>
        <span>姓名：</span>
        <input type="text" name="" placeholder="请输入姓名" v-model="newStudent.name">
      </div>

         <div>
        <span>性别：</span>
       <select v-model="newStudent.sex">
         <option value="男">男</option>
         <option value="女">女</option>
       </select>
      </div>

         <div>
        <span>年龄：</span>
        <input type="number" name="" placeholder="请输入年龄"  v-model="newStudent.age">
      </div>

         <div>
        <span>手机：</span>
        <input type="number" name="" placeholder="请输入手机"  v-model="newStudent.phone">
      </div>
      <button  @click="createNewStudent()">创建新用户</button>
  </fieldset>
 
<!--  第二部分 -->
<table>
  <thead>
    <tr>
      <td>姓名</td>
      <td>性别</td>
      <td>年龄</td>
      <td>手机</td>
      <td>删除</td>
    </tr>
  </thead>
  <tbody>
    <tr v-for='(item,index) in persons'>
      <td>{{item.name}}</td>
      <td>{{item.age}}</td>
      <td>{{item.sex}}</td>
      <td>{{item.phone}}</td>
      <td>
        <button @click="deleteStudentMsg(index)">删除</button>
      </td>
    </tr>
  </tbody>
</table>
</div>
</body>
</html>

<script> 

 new Vue({
  el: '#app',
  data:{
    persons:[
      {name:'张三',age:'20',sex:'女',phone:'12733883838'},
      {name:'张2',age:'20',sex:'女',phone:'12733883838'},
      {name:'张4',age:'20',sex:'女',phone:'12733883838'},
      {name:'张5',age:'20',sex:'女',phone:'12733883838'}
    ],
    newStudent:{name:'',age:'0',sex:'男',phone:''}
  },
  methods:{
    //创建一条新记录
    createNewStudent(){
       var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
      //姓名不能为空
      if(this.newStudent.name === ''){
        alert('姓名不能为空');
        return;
      }

        if(this.newStudent.age <= 0){
        alert('请输入正确的年龄');
        return;
      }

        if(this.newStudent.phone === ''){
        alert('手机不能为空');
      }else if (!reg.test(this.newStudent.phone)) {
        alert('请输入正确手机号格式')
        return;
      }
      //往数组中添加一条新纪录
     this.persons.unshift (this.newStudent)
     //清空数据
     this.newStudent = {name:'',age:'0',sex:'男',phone:''}
    },

    //删除一条学生记录
    deleteStudentMsg(index){
      this.persons.splice(index,1);
    }
  }
})
</script>